@import "@appsmith/wds/src/shared/colors/colors.module.css";

.table {
  --th-height: calc(
    var(--caption-line-height) + var(--caption-margin-end) +
      var(--caption-margin-start) + (2 * var(--inner-spacing-4))
  );
  --tr-height: calc(
    var(--body-line-height) + var(--body-margin-end) + var(--body-margin-start) +
      (2 * var(--outer-spacing-4))
  );

  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
  background: var(--color-bg-elevation-3);
  border-style: solid;
  border-width: var(--border-width-1);
  border-color: var(--color-bd);
  border-radius: var(--border-radius-elevation-3);
  box-sizing: border-box;
  /* adding overflow hidden so that the scollbar at the bottom does not flow out */
  overflow: hidden;

  /* --------------------------------------------------------------------------
   * WRAPPER
   *-------------------------------------------------------------------------- */
  [data-table-wrapper] {
    display: block;
    position: relative;
    overflow: auto hidden;
    scrollbar-color: initial;
    container-type: inline-size;
  }

  [data-disable-scroll] {
    overflow: hidden;
  }

  /* --------------------------------------------------------------------------
   * TABLE
   *-------------------------------------------------------------------------- */
  & [role="table"] {
    background-position-x: var(--th-height);
    background-position-y: var(--tr-height);

    border-spacing: 0;
    display: table;
  }

  /* --------------------------------------------------------------------------
   * THEAD
   *-------------------------------------------------------------------------- */
  & thead {
    position: sticky;
    top: 0;
    z-index: 1;
    width: fit-content;
  }

  /* --------------------------------------------------------------------------
   * ROWGROUP
   *-------------------------------------------------------------------------- */
  & [role="rowgroup"] {
    position: relative;
  }

  /* --------------------------------------------------------------------------
   * TH
   *-------------------------------------------------------------------------- */
  & thead [role="columnheader"] {
    padding-inline: var(--outer-spacing-1);
    padding-block: var(--outer-spacing-1);
    background: var(--color-bg-elevation-3);
    font-weight: bold;
    align-items: center;
    border-block-end: var(--border-width-1) solid var(--color-bd);
  }

  & thead [role="columnheader"][aria-hidden] {
    opacity: var(--opacity-disabled);
  }

  &[data-variant="default"] thead [role="columnheader"] {
    border-inline-end: var(--border-width-1) solid var(--color-bd);
  }

  & thead [role="columnheader"]:last-child {
    border-inline-end: none;
  }

  & thead [role="columnheader"][data-sticky-td] {
    position: sticky;
    left: 0;
  }

  & thead [role="columnheader"][data-highlight-position="start"] {
    border-inline-start: 2px solid var(--color-bd-positive);
  }

  & thead [role="columnheader"][data-highlight-position="end"] {
    border-inline-end: 2px solid var(--color-bd-positive);
  }

  & thead [role="columnheader"] [data-draggable-header] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: items;
    padding-inline: var(--outer-spacing-3);
    padding-inline-end: var(--padding-inline-end);
  }

  &
    thead
    [role="columnheader"]:has([data-status="dragging"])
    [data-draggable-header] {
    background: var(--color-bg);
    border-radius: 4px;
    z-index: 100;
    width: 100%;
    text-overflow: none;
    overflow: none;
  }

  & thead [role="columnheader"][data-sticky-last-left-td]:not([aria-hidden]) {
    left: 0px;
    border-right: 3px solid var(--color-bd);
  }

  & thead [role="columnheader"][data-sticky-first-right-td]:not([aria-hidden]) {
    right: 0px;
    border-left: 3px solid var(--color-bd);
  }

  /* --------------------------------------------------------------------------
   * TR
   *-------------------------------------------------------------------------- */
  & [role="row"] {
    display: flex;
    min-block-size: var(--tr-height);
  }

  & [role="row"]:has([role="columnheader"]) {
    block-size: var(--th-height);
    min-block-size: auto;
  }

  /*-------------------------------------------------------------------------
  * Cell ( td )
  *-------------------------------------------------------------------------- */
  & [role="cell"] {
    position: relative;
    background-color: var(--color-bg-elevation-3);
  }

  & [role="cell"][aria-hidden] {
    opacity: var(--opacity-disabled);
  }

  & [role="row"][aria-checked="true"] [role="cell"] {
    background-color: var(--color-bg-accent-subtle);
  }

  &[data-status="add-row-in-progress"] [role="cell"] {
    background: var(--color-bg);
  }

  & [role="row"][data-is-new] [role="cell"] {
    background: var(--color-bg-accent-subtle);
  }

  &[data-variant="default"] [role="cell"]:not(:last-child) {
    border-inline-end: var(--border-width-1) solid var(--color-bd);
  }

  &[data-variant="default"] [role="row"]:last-child [role="cell"] {
    border-block-end-color: transparent;
  }

  &:is([data-variant="horizontal-borders"], [data-variant="default"])
    [role="cell"] {
    border-block-end: var(--border-width-1) solid var(--color-bd);
  }

  & [role="cell"][data-sticky-td] {
    position: sticky;
    position: -webkit-sticky;
  }

  & [role="cell"][data-sticky-last-left-td]:not([aria-hidden]) {
    left: 0px;
    border-right: 3px solid var(--color-bd);
  }

  & [role="cell"][data-sticky-first-right-td]:not([aria-hidden]) {
    right: 0px;
    border-left: 3px solid var(--color-bd);
  }

  /*important is added below because the useSticky hooks adds styles as inline css */
  & :is([role="cell"], th)[data-sticky-td][aria-hidden] {
    position: relative !important;
    left: unset !important;
    right: unset !important;
  }

  /*-------------------------------------------------------------------------
  * Column Types
  *-------------------------------------------------------------------------- */
  &
    [role="cell"]:is(
      [data-column-type="text"],
      [data-column-type="number"],
      [data-column-type="url"],
      [data-column-type="date"],

    ) {
    padding: var(--outer-spacing-4) var(--outer-spacing-3);
  }

  & [role="cell"]:is([data-column-type="button"]) {
    align-items: center !important;
    padding-inline: var(--outer-spacing-3);
  }

  @each $color in colors {
    &
      [role="cell"][data-cell-color="$(color)"]:not(
        [data-column-type="button"],
        [data-column-type="url"]
      ) {
      background-color: var(--color-bg-$(color)-subtle);
    }

    &
      [role="row"][aria-checked="true"]
      [role="cell"][data-cell-color="$(color)"] {
      background-color: var(--color-bg-$(color)-subtle-active);
    }
  }

  /* --------------------------------------------------------------------------
  * Resizor
  *-------------------------------------------------------------------------- */
  & [data-resizor] {
    display: inline-block;
    width: 10px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(50%);
    z-index: 1;
    /* prevents from scrolling while dragging on touch devices */
    touch-action: none;
  }

  & [data-resizor][data-status="resizing"] {
    cursor: isResizing;
  }

  & thead th:last-child [data-resizor] {
    right: 5px;
  }
}
